
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
自定义标注图标,从大图截取部分内容</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=true">
</script>
</head>
<body>
<style>
 #anchorBL
 {
	display:none;
 }
  .anchorBL
 {
	display:none;
 }
</style>
<div style="padding:100px"><div style="width:255px;height:300px;border:1px solid gray" id="container"></div></div>

</body>
</html>
<script type="text/javascript">

var image = new Image();
//image.src = "custom_a_j.png";
image.src = "http://img1.gtimg.com/edu/pics/hv1/66/206/675/43944471.jpg";

var mapContainer = document.getElementById("container");
mapContainer.style.width = image.width;
mapContainer.style.height = image.height;

var map = new BMap.Map("container");
var point = new BMap.Point(0.0, 0.0);
map.centerAndZoom(point, 15);

 // 编写自定义函数,创建标注
function addMarker(point, index){
  var myIcon = new BMap.Icon( "http://openapi.baidu.com/map/images/custom_a_j.png",new BMap.Size(28, 37),
  {
     offset: new BMap.Size(10, 25),
     imageOffset: new BMap.Size(0 - index * 28, 0)
  });
  
  var marker = new BMap.Marker(point, {icon: myIcon});
  
	var opts = {
	  width : 250,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "Hello"  // 信息窗口标题
	}


var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象

	marker.addEventListener("click", function(){                                        
	   this.openInfoWindow(infoWindow);        
	});
  
  map.addOverlay(marker);
}
 
// 编写自定义函数,创建标注
function addImage(point, index){
  var offx = map.getSize().width / 2;
  var offy = map.getSize().height / 2;
  
  var myIcon = new BMap.Icon( "http://img1.gtimg.com/edu/pics/hv1/66/206/675/43944471.jpg",new BMap.Size(image.width, image.height),
  {
     offset: new BMap.Size(offx, offy),
     imageOffset: new BMap.Size(0, 0)
  });
	
  var marker = new BMap.Marker(point, {icon: myIcon});

  map.addOverlay(marker);
}
  
 
// 随机向地图添加10个标注
var bounds = map.getBounds();
var imagePoint = new BMap.Point(0, 0);
addImage(imagePoint, 0);

var lngSpan = bounds.maxX - bounds.minX;
var latSpan = bounds.maxY - bounds.minY;

for (var i = 0; i < 10; i ++) {
  var point = new BMap.Point(bounds.minX + lngSpan * Math.random() * 0.7, bounds.minY + latSpan * Math.random() * 0.7);
  addMarker(point, i);
  
}
</script>

